<template>
  <div class="max-w-3xl mx-auto">
    <h2
      class="text-3xl font-bold text-center mb-6 text-gray-800 dark:text-gray-200"
    >
      Life Moments
    </h2>
    <div class="space-y-6">
      <div
        v-for="moment in renderList"
        :key="moment.id"
        class="rounded-lg shadow-md dark:bg-[#121826] overflow-hidden"
      >
        <!-- Image Section -->
        <div v-if="moment.cover" class="relative">
          <img
            :src="moment.cover"
            alt="Life Moment"
            class="w-full h-48 object-cover"
          />
          <span
            class="absolute bottom-3 right-3 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded-lg"
          >
            {{
              useDateFormat(new Date(moment.createdAt), 'YYYY-MM-DD HH:mm:ss')
            }}
          </span>
        </div>
        <!-- Content Section -->
        <div class="p-4">
          <div class="space-x-3">
            <h3
              class="text-lg font-semibold text-gray-800 dark:text-gray-100 sm:text-xl md:text-2xl"
            >
              {{ moment.title }}
            </h3>
          </div>
          <!-- Description -->
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-2 sm:text-base">
            {{ moment.content.slice(0, 50) + '.....' }}
          </p>
          <!-- Tags -->
          <div class="mt-4 flex flex-wrap gap-2">
            <span
              v-for="tag in moment.tags"
              :key="tag"
              :class="getTagClass(tag)"
              class="px-3 py-1 text-xs font-medium rounded-full sm:text-sm"
            >
              {{ tag }}
            </span>
          </div>
          <!-- Icon and Location Section using Flexbox -->
          <div class="flex justify-end items-center sm:mt-6">
            <div class="flex items-center">
              <!-- Location -->
              <p
                class="text-sm text-gray-500 dark:text-gray-400 flex items-center sm:text-base"
              >
                <i class="fas fa-map-marker-alt mr-2 text-red-500"></i>
                {{ moment.address }}
              </p>
            </div>
            <!-- Icon -->
          </div>
        </div>
      </div>
      <My-pagination
        :page="currentPage"
        :totalPages="totalPages"
        :scrollTo="720"
        @page-changed="handerPageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { useDateFormat } from '@vueuse/core'
import { ref } from 'vue'
import {
  getLifeMomentRequest,
  getLifeMomentTotalRequest
} from '@/api/public/index.js'
const currentPage = ref(1)
const totalPages = ref(0)
const renderList = ref([])
const getNextPageData = (nextPage) => {
  getLifeMomentRequest(nextPage, 5).then((res) => {
    renderList.value = res.data.data
  })
}
getNextPageData(currentPage.value)
getLifeMomentTotalRequest().then((res) => {
  totalPages.value = Math.ceil(res.data.total / 5)
})
const handerPageChange = (page) => {
  getNextPageData(page, 5)
}
// 返回不同标签的样式
const getTagClass = (tag) => {
  switch (tag) {
    case 'morning':
      return 'bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-200'
    case 'park':
      return 'bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-200'
    case 'nature':
      return 'bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-200'
    case 'food':
      return 'bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-200'
    case 'lunch':
      return 'bg-orange-200 text-orange-800 dark:bg-orange-700 dark:text-orange-200'
    case 'restaurant':
      return 'bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-200'
    case 'yoga':
      return 'bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-200'
    case 'evening':
      return 'bg-indigo-200 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-200'
    case 'relaxation':
      return 'bg-teal-200 text-teal-800 dark:bg-teal-700 dark:text-teal-200'
    default:
      return 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
  }
}
</script>

<style scoped>
/* 你可以在这里添加任何自定义样式 */
</style>
